<template>
  <view class="pic-editer">
	  <van-button type="primary" @click="select" block style="margin-bottom: 10rpx;">识别图片</van-button>
      <image mode="widthFix" :src="path"/>
      <ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import imageTools from '@/uni_modules/niceui-image-tools/util/image-tools.js'

const emit = defineEmits(['clipImg'])
const url = ref('')
const path = ref('')

const select = ()=> {
	uni.chooseImage({
		count: 1,
		success: (rst) => {
			// 设置url的值，显示控件
			url.value = rst.tempFilePaths[0];
		}
	});
}
const onok =(ev)=> {
	url.value = "";
	path.value = ev.path;
	if( ev.path && !ev.base64){
		convertToBase64(ev.path)
	}else {
		emit('clipImg', ev)
	}
}
const oncancel = ()=> {
	// url设置为空，隐藏控件
	url.value = "";
}

const convertToBase64 = (filePath) => {
	imageTools.pathToBase64(filePath).then(base64 => {
		emit('clipImg', { base64 : base64})
	})
}
</script>

<style scoped lang="scss">
.pic-editer {
	:deep(.panel) {
		left: 0;
	}	
}
</style>